<template>
  <a-input v-model:value="iconName" allowClear>
    <template v-slot:addonAfter>
      <a-popover trigger="click">
        <template v-slot:content>
          <a-row class="icon-box">
            <a-col v-for="item in iconArray" :key="item" :span="2">
              <a-button size="large" @click="selectIcon(item)">
                <SvgIcon :name="item" />
              </a-button>
            </a-col>
          </a-row>
        </template>
        <SvgIcon name="search" />
      </a-popover>
    </template>
  </a-input>
</template>

<script>
import { computed } from 'vue';
export default {
  name: 'SelectIcon',
  props: {
    data: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    let iconArray = [
      'share',
      'HTML-fill',
      'branches',
      'windows-fill',
      'fork',
      'QQ',
      'shrink',
      'twitter',
      'arrawsalt',
      'skype-fill',
      'verticalright',
      'weibo',
      'verticalleft',
      'yuque-fill',
      'right',
      'Youtube-fill',
      'left',
      'yahoo-fill',
      'up',
      'wechat-fill',
      'down',
      'chrome-fill',
      'fullscreen',
      'alipay-circle-fill',
      'fullscreen-exit',
      'aliwangwang-fill',
      'doubleleft',
      'behance-circle-fill',
      'doubleright',
      'amazon-circle-fill',
      'arrowright',
      'codepen-circle-fill',
      'arrowup',
      'CodeSandbox-circle-f',
      'arrowleft',
      'dropbox-circle-fill',
      'arrowdown',
      'github-fill',
      'upload',
      'dribbble-circle-fill',
      'colum-height',
      'googleplus-circle-f',
      'vertical-align-botto',
      'medium-circle-fill',
      'vertical-align-middl',
      'QQ-circle-fill',
      'totop',
      'IE-circle-fill',
      'vertical-align-top',
      'google-circle-fill',
      'download',
      'dingtalk-circle-fill',
      'sort-descending',
      'sketch-circle-fill',
      'sort-ascending',
      'slack-circle-fill',
      'fall',
      'twitter-circle-fill',
      'swap',
      'taobao-circle-fill',
      'stock',
      'weibo-circle-fill',
      'rise',
      'zhihu-circle-fill',
      'indent',
      'reddit-circle-fill',
      'outdent',
      'alipay-square-fill',
      'menu',
      'dingtalk-square-fill',
      'unorderedlist',
      'CodeSandbox-square-f',
      'orderedlist',
      'behance-square-fill',
      'align-right',
      'amazon-square-fill',
      'align-center',
      'codepen-square-fill',
      'align-left',
      'dribbble-square-fill',
      'pic-center',
      'dropbox-square-fill',
      'pic-right',
      'facebook-fill',
      'pic-left',
      'googleplus-square-f',
      'bold',
      'google-square-fill',
      'font-colors',
      'instagram-fill',
      'exclaimination',
      'IE-square-fill',
      'check-circle',
      'font-size',
      'medium-square-fill',
      'CI',
      'infomation',
      'linkedin-fill',
      'Dollar',
      'line-height',
      'QQ-square-fill',
      'compass',
      'strikethrough',
      'reddit-square-fill',
      'close-circle',
      'underline',
      'twitter-square-fill',
      'frown',
      'number',
      'sketch-square-fill',
      'info-circle',
      'italic',
      'slack-square-fill',
      'left-circle',
      'code',
      'taobao-square-fill',
      'down-circle',
      'column-width',
      'weibo-square-fill',
      'EURO',
      'check',
      'zhihu-square-fill',
      'copyright',
      'ellipsis',
      'zoomout',
      'minus-circle',
      'dash',
      'apartment',
      'meh',
      'close',
      'audio',
      'plus-circle',
      'enter',
      'audio-fill',
      'play-circle',
      'line',
      'robot',
      'question-circle',
      'minus',
      'zoomin',
      'Pound',
      'question',
      'robot-fill',
      'right-circle',
      'rollback',
      'bug-fill',
      'smile',
      'small-dash',
      'bug',
      'trademark',
      'pause',
      'audiostatic',
      'time-circle',
      'bg-colors',
      'comment',
      'timeout',
      'crown',
      'signal-fill',
      'earth',
      'drag',
      'verified',
      'YUAN',
      'desktop',
      'shortcut-fill',
      'up-circle',
      'gift',
      'videocameraadd',
      'warning-circle',
      'stop',
      'switchuser',
      'sync',
      'fire',
      'whatsapp',
      'transaction',
      'thunderbolt',
      'appstoreadd',
      'undo',
      'check-circle-fill',
      'caret-down',
      'redo',
      'left-circle-fill',
      'backward',
      'reload',
      'down-circle-fill',
      'caret-up',
      'reloadtime',
      'minus-circle-fill',
      'caret-right',
      'message',
      'close-circle-fill',
      'caret-left',
      'dashboard',
      'info-circle-fill',
      'fast-backward',
      'issuesclose',
      'up-circle-fill',
      'forward',
      'poweroff',
      'right-circle-fill',
      'fast-forward',
      'logout',
      'plus-circle-fill',
      'search',
      'piechart',
      'question-circle-fill',
      'retweet',
      'setting',
      'EURO-circle-fill',
      'login',
      'eye',
      'frown-fill',
      'step-backward',
      'location',
      'copyright-circle-fil',
      'step-forward',
      'edit-square',
      'CI-circle-fill',
      'swap-right',
      'export',
      'compass-fill',
      'swap-left',
      'save',
      'Dollar-circle-fill',
      'woman',
      'Import',
      'poweroff-circle-fill',
      'plus',
      'appstore',
      'meh-fill',
      'eyeclose-fill',
      'close-square',
      'play-circle-fill',
      'eye-close',
      'down-square',
      'Pound-circle-fill',
      'clear',
      'layout',
      'smile-fill',
      'collapse',
      'left-square',
      'stop-fill',
      'expand',
      'play-square',
      'warning-circle-fill',
      'deletecolumn',
      'control',
      'time-circle-fill',
      'merge-cells',
      'codelibrary',
      'trademark-circle-fil',
      'subnode',
      'detail',
      'YUAN-circle-fill',
      'rotate-left',
      'minus-square',
      'heart-fill',
      'rotate-right',
      'plus-square',
      'piechart-circle-fil',
      'insertrowbelow',
      'right-square',
      'dashboard-fill',
      'insertrowabove',
      'project',
      'message-fill',
      'table1',
      'wallet',
      'check-square-fill',
      'solit-cells',
      'up-square',
      'down-square-fill',
      'formatpainter',
      'calculator',
      'minus-square-fill',
      'insertrowright',
      'interation',
      'close-square-fill',
      'formatpainter-fill',
      'check-square',
      'codelibrary-fill',
      'insertrowleft',
      'border',
      'left-square-fill',
      'translate',
      'border-outer',
      'play-square-fill',
      'deleterow',
      'border-top',
      'up-square-fill',
      'sisternode',
      'border-bottom',
      'right-square-fill',
      'Field-number',
      'border-left',
      'plus-square-fill',
      'Field-String',
      'border-right',
      'accountbook-fill',
      'Function',
      'border-inner',
      'carryout-fill',
      'Field-time',
      'border-verticle',
      'calendar-fill',
      'GIF',
      'border-horizontal',
      'calculator-fill',
      'Partition',
      'radius-bottomleft',
      'interation-fill',
      'index',
      'radius-bottomright',
      'project-fill',
      'Storedprocedure',
      'radius-upleft',
      'detail-fill',
      'Field-Binary',
      'radius-upright',
      'save-fill',
      'Console-SQL',
      'radius-setting',
      'wallet-fill',
      'icon-test',
      'adduser',
      'control-fill',
      'aim',
      'deleteteam',
      'layout-fill',
      'compress',
      'deleteuser',
      'appstore-fill',
      'expend',
      'addteam',
      'mobile-fill',
      'folder-view',
      'user',
      'tablet-fill',
      'file-GIF',
      'team',
      'book-fill',
      'group',
      'areachart',
      'redenvelope-fill',
      'send',
      'linechart',
      'safetycertificate-f',
      'Report',
      'barchart',
      'propertysafety-fill',
      'View',
      'pointmap',
      'insurance-fill',
      'shortcut',
      'container',
      'securityscan-fill',
      'ungroup',
      'database',
      'file-exclamation-fil',
      'sever',
      'file-add-fill',
      'mobile',
      'file-fill',
      'tablet',
      'file-excel-fill',
      'redenvelope',
      'file-markdown-fill',
      'book',
      'file-text-fill',
      'filedone',
      'file-ppt-fill',
      'reconciliation',
      'file-unknown-fill',
      'file-exception',
      'file-word-fill',
      'filesync',
      'file-zip-fill',
      'filesearch',
      'file-pdf-fill',
      'solution',
      'file-image-fill',
      'fileprotect',
      'diff-fill',
      'file-add',
      'file-copy-fill',
      'file-excel',
      'snippets-fill',
      'file-exclamation',
      'batchfolding-fill',
      'file-pdf',
      'reconciliation-fill',
      'file-image',
      'folder-add-fill',
      'file-markdown',
      'folder-fill',
      'file-unknown',
      'folder-open-fill',
      'file-ppt',
      'database-fill',
      'file-word',
      'container-fill',
      'file',
      'sever-fill',
      'file-zip',
      'calendar-check-fill',
      'file-text',
      'image-fill',
      'file-copy',
      'idcard-fill',
      'snippets',
      'creditcard-fill',
      'audit',
      'fund-fill',
      'diff',
      'read-fill',
      'Batchfolding',
      'contacts-fill',
      'securityscan',
      'delete-fill',
      'propertysafety',
      'notification-fill',
      'safetycertificate',
      'flag-fill',
      'insurance',
      'moneycollect-fill',
      'alert',
      'medicinebox-fill',
      'delete',
      'rest-fill',
      'hourglass',
      'shopping-fill',
      'bulb',
      'skin-fill',
      'experiment',
      'video-fill',
      'bell',
      'sound-fill',
      'trophy',
      'bulb-fill',
      'rest',
      'bell-fill',
      'USB',
      'filter-fill',
      'skin',
      'fire-fill',
      'home',
      'funnelplot-fill',
      'bank',
      'gift-fill',
      'filter',
      'hourglass-fill',
      'funnelplot',
      'home-fill',
      'like',
      'trophy-fill',
      'unlike',
      'location-fill',
      'unlock',
      'cloud-fill',
      'lock',
      'customerservice-fill',
      'customerservice',
      'experiment-fill',
      'flag',
      'eye-fill',
      'moneycollect',
      'like-fill',
      'medicinebox',
      'lock-fill',
      'shop',
      'unlike-fill',
      'rocket',
      'star-fill',
      'shopping',
      'unlock-fill',
      'folder',
      'alert-fill',
      'folder-open',
      'api-fill',
      'folder-add',
      'highlight-fill',
      'deploymentunit',
      'phone-fill',
      'accountbook',
      'edit-fill',
      'contacts',
      'pushpin-fill',
      'carryout',
      'rocket-fill',
      'calendar-check',
      'thunderbolt-fill',
      'calendar',
      'tag-fill',
      'scan',
      'wrench-fill',
      'select',
      'tags-fill',
      'boxplot',
      'bank-fill',
      'build',
      'camera-fill',
      'sliders',
      'error-fill',
      'laptop',
      'crown-fill',
      'barcode',
      'mail-fill',
      'camera',
      'car-fill',
      'cluster',
      'printer-fill',
      'gateway',
      'shop-fill',
      'car',
      'setting-fill',
      'printer',
      'USB-fill',
      'read',
      'golden-fill',
      'cloud-server',
      'build-fill',
      'cloud-upload',
      'boxplot-fill',
      'cloud',
      'sliders-fill',
      'cloud-download',
      'alibaba',
      'cloud-sync',
      'alibabacloud',
      'video',
      'antdesign',
      'notification',
      'ant-cloud',
      'sound',
      'behance',
      'radarchart',
      'googleplus',
      'qrcode',
      'medium',
      'fund',
      'google',
      'image',
      'IE',
      'mail',
      'amazon',
      'table',
      'slack',
      'idcard',
      'alipay',
      'creditcard',
      'taobao',
      'heart',
      'zhihu',
      'block',
      'HTML',
      'error',
      'linkedin',
      'star',
      'yahoo',
      'gold',
      'facebook',
      'heatmap',
      'skype',
      'wifi',
      'CodeSandbox',
      'attachment',
      'chrome',
      'edit',
      'codepen',
      'key',
      'aliwangwang',
      'api',
      'apple',
      'disconnect',
      'android',
      'highlight',
      'sketch',
      'monitor',
      'Gitlab',
      'link',
      'dribbble',
      'man',
      'instagram',
      'percentage',
      'reddit',
      'pushpin',
      'windows',
      'phone',
      'yuque',
      'shake',
      'Youtube',
      'tag',
      'Gitlab-fill',
      'wrench',
      'dropbox',
      'tags',
      'dingtalk',
      'scissor',
      'android-fill',
      'mr',
      'apple-fill'
    ];

    let iconName = computed({
      get() {
        return props.data;
      },
      set(val) {
        emit('update:data', val);
      }
    });

    function selectIcon(icon) {
      emit('update:data', icon);
    }

    return {
      iconArray,
      selectIcon,
      iconName
    };
  }
};
</script>

<style lang="scss" scoped>
.icon-box {
  width: 650px;
  height: 400px;
  padding: 10px;
  overflow-y: auto;
  .ant-col {
    margin-bottom: 5px;
  }
}
</style>
